<template>
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <h1>
        <!-- <a href="#">小兔鲜儿</a> -->
        <router-link to="/come">宋朝</router-link>
      </h1>

    </div>
    <!-- 导航 -->
    <div class="nav" style="margin-left: 100px;">
      <ul>
        <li><router-link to="/index">首页</router-link></li>
        <!-- <li><router-link to="/mygoods">服饰</router-link></li> -->
        <li><router-link to="/suit">常服</router-link></li>
        <li><router-link to="/robe">官服</router-link></li>
        <li><router-link to="/bclothing">基本服装</router-link></li>
        <li><router-link to="/accessory">配饰</router-link></li>
        <li><router-link to="/fan">扇子</router-link></li>
        <li><router-link to="/cufflink">袖扣</router-link></li>
        <li><router-link to="/pendant">玉佩</router-link></li>
      </ul>
    </div>
    <!-- 搜索 -->
    <div class="search" style="margin-left: 30px;">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜" />
    </div>
    <!-- 购物车 -->
    <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.header {
  display: flex;
  margin: 22px auto;
}
.header .logo {
  margin-right: 40px;
  width: 120px;
  height: 100px;
  background-color: pink;
}
.header .logo a {
  display: block;
  width: 120px;
  height: 100px;
  background-image: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.UjaudyKwxbXPKTRmrHn3eQAAAA?w=153&h=180&c=7&r=0&o=5&dpr=2&pid=1.7);
  background-size: cover;
  background-position: center; /* 可选，使图片居中显示 */
  font-size: 0;
}
.header .nav {
  margin-top: 33px;
  margin-right: 27px;
}
.header .nav ul {
  display: flex;
}
.header .nav li {
  margin-right: 48px;
}
.header .nav a {
  display: block;
  height: 34px;
}
.header .nav a:hover {
  border-bottom: 2px solid #5eb69c;
}
.header .search {
  display: flex;
  margin-right: 45px;
  margin-top: 33px;
  width: 170px;
  height: 34px;
  border-bottom: 2px solid #f4f4f4;
}
.header .search .icon-search {
  margin-right: 8px;
  font-size: 20px;
  color: #999;
}
.header .search input {
  flex: 1;
}
.header .search input::placeholder {
  color: #ccc;
}
.header .cart {
  position: relative;
  margin-top: 33px;
}
.header .cart .icon-cart-full {
  font-size: 24px;
}
.header .cart i {
  position: absolute;
  /* right: -5px; */
  left: 15px;
  top: 0;
  padding: 0 5px;
  height: 15px;
  background-color: #e26237;
  border-radius: 7px;
  font-size: 12px;
  color: #fffefe;
  line-height: 15px;
}
</style>
